<template>
  <div class="container">
    <h2>文件版本管理</h2>

    <!-- 输入任务名称 -->
    <div class="input-group">
      <label>任务名称：</label>
      <input v-model="taskName" placeholder="请输入任务名称" />
      <button @click="fetchFiles">查询文件</button>
    </div>

    <!-- 显示选中的任务名称 -->
    <p v-if="selectedTaskName" class="task-info">当前任务：{{ selectedTaskName }}</p>

    <!-- 任务下的文件列表 -->
    <div v-if="files.length > 0">
      <h3 class="table-title">任务文件列表：{{ selectedTaskName }}</h3>
      <table>
        <thead>
        <tr>
          <th>文件名称</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="file in files" :key="file">
          <td>{{ file }}</td>
          <td>
            <button @click="fetchFileVersions(file)">查询版本</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 版本列表 -->
    <div v-if="fileVersions.length > 0">
      <h3 class="table-title">文件版本列表：{{ selectedFile }}</h3>
      <table>
        <thead>
        <tr>
          <th>版本号</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="version in fileVersions" :key="version">
          <td>{{ version }}</td>
          <td>
            <!-- 回滚按钮 -->
            <button @click="rollbackFile(version)">回滚</button>
            <!-- 版本预览按钮 -->
            <button @click="preview(selectedFile, version)">预览</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 预览区域 -->
    <div v-if="fileUrl">
      <h3>文件预览</h3>
      <iframe :src="fileUrl" width="100%" height="600px"></iframe>
    </div>

    <p v-if="message" class="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      taskName: "", // 用户输入的任务名称
      selectedTaskName: "", // 当前查询的任务名称
      files: [], // 任务下的文件列表
      fileVersions: [], // 版本列表
      selectedFile: "", // 当前查询版本的文件
      message: "", // 操作提示信息
      fileUrl: null, // 文件预览URL
    };
  },
  methods: {
    // 获取任务下的所有文件
    async fetchFiles() {
      if (!this.taskName) {
        this.message = "请输入任务名称";
        return;
      }
      try {
        const response = await axios.get("http://localhost:8080/api/resources/resources", {
          params: { taskName: this.taskName },
        });
        if (response.data && response.data.length > 0) {
          this.files = response.data.map((res) => res.resourceName); // 获取文件名称
          this.selectedTaskName = this.files.length > 0 ? this.taskName : ""; // 显示任务名称
        } else {
          this.files = []; // 如果没有数据，清空文件列表
        }
        this.fileVersions = []; // 清空版本列表
        this.selectedFile = "";
        this.message = this.files.length === 0 ? "该任务下没有文件" : "";
      } catch (error) {
        this.message = "获取文件失败";
        console.error("获取文件失败:", error);
      }
    },

    // 获取文件的所有版本
    async fetchFileVersions(fileName) {
      this.selectedFile = fileName;
      try {
        const response = await axios.get("http://localhost:8080/api/resources/versions", {
          params: { taskName: this.selectedTaskName, fileName },
        });

        // 处理返回的版本信息，只提取版本号
        if (response.status === 204) {
          this.fileVersions = [];
          this.message = "未找到文件版本";
        } else {
          // 假设版本号是返回字符串中的数字部分，通过正则表达式提取
          this.fileVersions = response.data.map(versionString => {
            const versionNumber = versionString.match(/\d+/); // 匹配字符串中的数字部分
            return versionNumber ? versionNumber[0] : versionString; // 如果匹配到数字，返回数字部分，否则返回原字符串
          });
          this.message = this.fileVersions.length === 0 ? "未找到文件版本" : "";
        }
      } catch (error) {
        this.message = "获取文件版本失败";
        console.error("获取文件版本失败:", error);
      }
    },

    // 回滚文件
    async rollbackFile(targetVersion) {
      if (!confirm(`确认回滚到版本 ${targetVersion}？`)) return;
      try {
        const response = await axios.post("http://localhost:8080/api/resources/rollback", null, {
          params: {
            taskName: this.selectedTaskName,
            fileName: this.selectedFile,
            targetVersion,
          },
        });
        this.message = response.data;
        await this.fetchFileVersions(this.selectedFile); // 重新获取版本列表
      } catch (error) {
        this.message = "回滚失败";
        console.error("回滚失败:", error);
      }
    },

    // 预览文件
    async preview(fileName, version) {
      try {
        const response = await axios.get('http://localhost:8080/api/resources/preview', {
          params: {
            taskName: this.selectedTaskName,
            fileName,
            targetVersion: version // 确保传递正确的版本号
          },
          responseType: 'blob' // 设置响应类型为 blob
        });

        if (response.status === 200) {
          this.fileUrl = URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
        } else {
          alert('预览失败: ' + response.statusText);
        }
      } catch (error) {
        console.error('预览失败:', error);
        alert('预览失败');
      }
    },
  },
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}
h2 {
  text-align: center;
}
.input-group {
  margin-bottom: 10px;
}
input {
  padding: 8px;
  width: 60%;
  margin-right: 10px;
}
button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.message {
  text-align: center;
  margin-top: 10px;
  color: red;
}
.task-info {
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.table-title {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: left;
}
</style>
